<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>六十甲子</title>
    <!-- <script src="./vue.esm-browser.js"></script> -->
    <style>
        html,body,div{padding: 0;margin: 0;}
      body {
        --col-width: 200px;
        background-image: linear-gradient(to right, #eee, #ddd);        
      }
      #app {
        height: 100vh;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
      }
      .tools{
        position: absolute;
        top:0;
        width: 100%;
        display: flex;
        background: #000;
        color: white;
        line-height: 40px;
      }
      .tools a{
        padding: 0 20px;
       cursor: pointer;
      }
      .tools a:hover{
        background-color: #333;
      }
      .tools a.current{
        background-color: #333;
      }
      ul {
        width: 1200px;
        height: 500px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--col-width), 1fr));
        /* grid-template-rows:  repeat(auto-fill, minmax(150px, 1fr)); */
        background-color: #fff;
      }
      li {
        margin: 10px;
        list-style: none;
        border: 1px solid #ddd;
        /* background-color: #f7f7f7; */
        background-image: linear-gradient(to bottom, #eee, #fff);
        text-align: center;
        /* vertical-align: middle; */
        line-height: 100%;
        height: 50px;
        display: inline-flex;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="tools">
       
        <a v-for="(li,i) in `地支排序,五行排序,天干排序`.split(',')" @click="sort(i)" :class="{current:(i==state)}">{{li}}</a>
      </div>

      <ul>
        <li v-for="li in list">{{li}}</li>
      </ul>
    </div>
    <script type="module">
      import { createApp, ref } from "./vue.esm-browser.js";
      createApp({
        setup() {
          const data =
            `甲子乙丑海中金,丙寅丁卯炉中火,戊辰己巳大林木,庚午辛未路旁土,壬申癸酉剑锋金,甲戌乙亥山头火,丙子丁丑涧下水,戊寅己卯墙头土,庚辰辛巳白蜡金,壬午癸未杨柳木,甲申乙酉泉中水,丙戌丁亥屋上土,戊子己丑霹雳火,庚寅辛卯松柏木,壬辰癸巳长流水,甲午乙未沙中金,丙申丁酉山下火,戊戌己亥平地木, 庚子辛丑壁上土,壬寅癸卯金泊金,甲辰乙巳覆灯火,丙午丁未天河水,戊申己酉大驿土,庚戌辛亥钗钏金, 壬子癸丑桑椹木,甲寅乙卯大溪水, 丙辰丁巳沙中土,戊午己未天上火, 庚申辛酉石榴木,壬戌癸亥大海水`.split(
              ","
            );
          const list = ref(data);
          const state = ref(0);
          const sort = (type) => {
            state.value=type;
            if (type == 1) {
              let items = []
                .concat(data.filter((s) => s.includes("金")))
                .concat(data.filter((s) => s.includes("木")))
                .concat(data.filter((s) => s.includes("水")))
                .concat(data.filter((s) => s.includes("火")))
                .concat(data.filter((s) => s.includes("土")));
              list.value = items;
              app.style.setProperty("--col-width", "200px");
            } else if (type ==2) {
              list.value = data;
              app.style.setProperty("--col-width", "240px");
            } else {
              list.value = data;
              app.style.setProperty("--col-width", "200px");
            }
          };
          return {
            list,
            sort,
            state
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
